<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功" style="min-height: 100vh">
  
  <van-tabs v-model="active" swipeable animated>
    <!-- 秒杀中 -->
      <van-tab title="秒杀中">
        <div class="acti-view" v-for="(item,index) in runningActivity" :key="index" @click="pushActivityDetail(item.activity_id)">
          <div class="acti-view-left">
            <span class="acti-view-left-rate">{{item.product_rate}}%</span>
            <span class="acti-view-left-meta">近一年增长率</span>
          </div>
          <div class="acti-view-center">
            <span class="acti-view-center-test">{{item.activity_name}}</span>
            <div class="acti-view-center-progress">
              <van-progress :percentage="item.t" stroke-width="8" />
            </div>
          </div>
          <div class="acti-view-right">
            <span class="acti-view-right-icon">
              <!-- <div v-show="item.flag==false" @click="item.flag = !item.flag">
                <img src="@/assets/icon/home/collection.svg">
                
              </div> -->
              <div v-show="item.flag==false" @click="item.flag = !item.flag">
               <img src="@/assets/icon/home/IsCollection.svg">
              </div>
            </span>
            <div class="acti-view-right-rate"> 
              {{item.number_of_favorites}}
            </div>
          </div>
        </div>
      </van-tab>
      <!-- 尚未开始 -->
      <van-tab :title="items[index] | timeFilter" v-for="(item,index) in items" :key="index"> 
        <div class="acti-view" v-for="(item,acindex) in upcomingActivity" :key="acindex" v-show="commingShow(acindex,active)" @click="pushActivityDetail(item.activity_id)">
          <div class="acti-view-left">
            <span class="acti-view-left-rate">{{item.product_rate}}%</span>
            <span class="acti-view-left-meta">近一年增长率</span>
          </div>
          <div class="acti-view-center">
            <span class="acti-view-center-test">{{item.activity_name}}</span>
            <div class="acti-view-center-progress">
              <van-progress :percentage="item.t" stroke-width="8" />
            </div>
          </div>
          <div class="acti-view-right">
            <span class="acti-view-right-icon">
              <!-- <div v-show="item.flag==false" @click="item.flag = !item.flag">
                <img src="@/assets/icon/home/collection.svg">
                
              </div> -->
              <div v-show="item.flag==false" @click="item.flag = !item.flag">
               <img src="@/assets/icon/home/IsCollection.svg">
              </div>
            </span>
            <div class="acti-view-right-rate"> 
              {{item.number_of_favorites}}
            </div>
          </div>
        </div>
        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="描述文字"
          v-show="nullShow"
        />
      </van-tab>
      <!-- <van-tab title="11"> 内容 </van-tab>
      <van-tab title="11"> 内容 </van-tab>
      <van-tab title="11"> 内容 </van-tab>
      <van-tab title="11"> 内容 </van-tab> -->
    </van-tabs>
    <!-- <p>刷新次数: {{ count }}</p> -->
  </van-pull-refresh>
</template>

<script>
import {activityList} from '@/api/activity'
export default {
  data(){
    return {
      iconShow:true,
      items:[],
      active:0,
      runningActivity:[],
      upcomingActivity:[],
      count: 0,
      isLoading: false,
      nullShow:false
    }
  },
  computed:{
    
  },
  filters:{
    timeFilter(value){
      let t = new Date().getHours();
      if(value==t){
        return "即将开始"
      }
      return value%24 + ":00"
    }
  },
  watch:{
  },
  
  created(){
    this.getactivityList()
    this.getTime();
  },
  methods:{
    // 获取当前秒杀和即将开放的秒杀产品
    getactivityList(){
      activityList().then(res => {
      if(res.data.running_activity){
        for(let i =0;i<res.data.running_activity.length;i++){
          let ob = {};
          ob = res.data.running_activity[i];
          let product_now_number = ((res.data.running_activity[i].product_total - res.data.running_activity[i].product_now_number) / res.data.running_activity[i].product_total)*100;
          let t = parseInt(product_now_number);
          ob.t = t;
          let flag = false;
          ob.flag = flag;
          this.runningActivity.push(ob);
        }
      }
      if(res.data.upcoming_activity){
        for(let i=0;i<res.data.upcoming_activity.length;i++){
          let ob = {};
          ob = res.data.upcoming_activity[i];
          let product_now_number = ((res.data.upcoming_activity[i].product_total - res.data.upcoming_activity[i].product_now_number) / res.data.upcoming_activity[i].product_total)*100;
          let t = parseInt(product_now_number);
          ob.t = t;
          let flag = false;
          ob.flag = flag;
          this.upcomingActivity.push(ob);
        }
      }  
    })
  },
    // 获取当前时间，并且刷新tab
    getTime(){
      let d = new Date();
      let time = d.getHours();
      for(let i=0;i<=8;i++){
        let t = (time + i);
        let str = t;
        this.items.push(str);
      }
    },
    // 根据时间段 显示活动
    commingShow(val,active){
      let flag = false;
      let s = this.items[active-1];
      let str = this.upcomingActivity[val].start_time.substring(11,13)
      if(str>=this.items[active-1] && str<this.items[active]){
        return true;
      }
      return false;
    },
    // 路由跳转
    pushActivityDetail(id){
      this.$router.push(`/activityDetail?q=${id}`)
    },
    // getRefresh(){
    //   activityList().then(res => {
    //     if(res.code==0){
    //       console.log(res)
    //       console.log("获取秒杀产品成功")
    //     }else {
    //       console.log("获取产品失败")
    //     }
    //   for(let i =0;i<res.data.running_activity.length;i++){
    //     if(this.runningActivity[i].activity_id==res.data.running_activity[i].activity_id) continue;
    //     else {
    //       let ob = {};
    //       ob = res.data.running_activity[i];
    //       let product_now_number = ((res.data.running_activity[i].product_total - res.data.running_activity[i].product_now_number) / res.data.running_activity[i].product_total)*100;
    //       let t = parseInt(product_now_number);
    //       ob.t = t;
    //       // let flag = false;
    //       // ob.flag = flag;
    //       this.runningActivity.splice(i+1,ob)
    //       // console.log(this.runningActivity)
    //     }
    //   }
    //   for(let i=0;i<res.data.upcoming_activity.length;i++){
    //     if(this.upcomingActivity[i].activity_id==res.data.upcomingActivity[i].activity_id) continue;
    //     else {
    //       let ob = {};
    //       ob = res.data.upcomingActivity[i];
    //       let product_now_number = ((res.data.upcomingActivity[i].product_total - res.data.upcomingActivity[i].product_now_number) / res.data.upcomingActivity[i].product_total)*100;
    //       let t = parseInt(product_now_number);
    //       ob.t = t;
    //       let flag = false;
    //       ob.flag = flag;
    //       this.upcomingActivity.splice(i+1,ob)
    //       // console.log(this.upcomingActivity)
    //     }
    //   }
    // })
    // },
    // 下拉刷新
    onRefresh() {
      this.runningActivity.length = 0;
      this.upcomingActivity.length = 0;
      this.items.length = 0;

      this.getTime();
      this.getactivityList()
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false;
        this.count++;
      }, 1000);
    },


  },
  
}
</script>

<style lang="less">
.acti-view{
  display: flex;
  margin: 10px auto;
  width: 93%;
  height: 73px;
  line-height: 20px;
  border-radius: 15px;
  text-align: center;
  border: 1px solid rgba(187, 187, 187, 100);
  background-color: rgb(255, 255, 255);
  .acti-view-left{
    display: flex;
    flex-direction:column;
    text-align: left;
    width: 35%;
    height: 100%;
    // border: 1px solid red;
    span{
      margin: 0px auto;
      margin-top: 10px;
    }
    .acti-view-left-rate{
      color: rgba(224, 19, 36, 100);
      font-size: 24px;
      text-align: left;
      font-family: PingFangSC-regular;
    }
    .acti-view-left-meta{
      color: rgba(162, 163, 164, 100);
      font-size: 14px;
      text-align: left;
      font-family: PingFangSC-extraLight;
    }
  }
  .acti-view-center{
    display: flex;
    flex-direction:column;
    width: 45%;
    height: 100%;
    // border: 1px solid red;
    .acti-view-center-test{
      margin-top: 10px;
      color: rgba(16, 16, 16, 100);
      font-size: 18px;
      text-align: left;
      font-family: PingFangSC-regular;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .acti-view-center-progress{
      width: 100%;
      margin-top: 15px;
    }
  }
  .acti-view-right{
    display: flex;
    flex-direction:column;
    width: 20%;
    height: 100%;
    // border: 1px solid red;
    .acti-view-right-icon{
      margin-top: 4px;
    }
    .acti-view-right-rate{
      color: rgba(162, 163, 164, 100);
      font-size: 14px;
      font-family: PingFangSC-regular;
    }
  }
}
</style>